import { useState } from 'react'
import { CheckCircleOutlined, DeleteOutlined } from '@ant-design/icons'
import { Card, Button, Skeleton, Avatar } from 'antd'

export default function CardComponent() {
	const [loading, setLoading] = useState(false)

	return (
		<Card
			style={{ width: 300, marginTop: 16 }}
			actions={[
				<Button type="primary">
					<CheckCircleOutlined />
					下单支付
				</Button>,
				<Button>
					<DeleteOutlined />
					清空
				</Button>
			]}
		>
			<Skeleton
				loading={loading} // 是否显示骨架屏
				active // 是否显示动画
			>
				<Card.Meta
					avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
					title="Card title"
					description="description"
				/>
			</Skeleton>
		</Card>
	)
}
